import React, {Component} from 'react';
import {
  SafeAreaView,
  ImageBackground,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TextInput,
  Dimensions,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  Linking
} from 'react-native';
import { CheckBox } from 'react-native-elements';
import {Actions} from 'react-native-router-flux';
import {showToast} from '../utils';
import Api from '../Api';
import { color } from 'react-native-reanimated';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      checked: false
    };
  }

  handleLogin = () => {
    const {loading, username, password, checked} = this.state;
    if (loading) {
      return;
    }
    if (!username) {
      showToast('请输入用户名');
      return;
    }
    if (!password) {
      showToast('请输入密码');
      return;
    }
    if (!checked) {
      showToast('请先阅读并同意隐私政策');
      return;
    }
    this.setState({
      loading: true,
    });
    Api.login(username, password)
      .then(data => {
        if (data.status == 200) {
          // Actions.pop();
          Actions.group();
          setTimeout(() => {
            Actions.refresh(data.body);
          }, 500);
        } else {
          this.setState({
            loading: false,
          });
        }
      })
      .catch(e => {
        this.setState({
          loading: false,
        });
      });
  };

  render() {
    const {loading, checked} = this.state
    return (
      <View>
        <StatusBar barStyle="light-content" backgroundColor="#000000" />
        <ImageBackground
          source={require('../assets/bootsplash_logo.png')}
          style={{
            justifyContent: 'center',
            height: '100%',
            width: '100%',
          }}>
          <SafeAreaView>
            <View style={styles.container}>
              <Image
                resizeMode="stretch"
                source={require('../assets/login_border.png')}
                style={styles.containerBorder}
              />
              <View style={styles.form}>
                <Text style={styles.title}>智数畅联运维服务平台APP</Text>
                <View style={[styles.formItem, {marginBottom: 25}]}>
                  <Image source={require('../assets/login_icon_account.png')} style={styles.loginIconAccount}></Image>
                  <TextInput
                    placeholder="请输入您的用户名"
                    textContentType="username"
                    placeholderTextColor="rgba(0, 187, 255, 1)"
                    onChangeText={text => {
                      this.setState({username: text});
                    }}
                    style={styles.inputStyle}
                  />
                </View>
                <View style={styles.formItem}>
                  <Image source={require('../assets/login_icon_password.png')} style={styles.loginIconAccount}></Image>
                  <TextInput
                    placeholder="请输入您的密码"
                    textContentType="password"
                    secureTextEntry
                    placeholderTextColor="rgba(0, 187, 255, 1)"
                    onChangeText={text => {
                      this.setState({password: text});
                    }}
                    style={styles.inputStyle}
                  />
                </View>
                <View style={styles.forget}>
                  <Text style={styles.forgetText} onPress={() => {
                    Actions.forget();
                  }}>忘记密码</Text>
                </View>
                <TouchableOpacity
                  disabled={!this.state.checked}
                  onPress={this.handleLogin}
                  style={[styles.buttonStyle, !checked && styles.disableButtonStyle, loading && styles.disableButtonStyle]}
                >
                  {loading ? <ActivityIndicator style={{marginRight: 5}} color="#fff" size="small" /> : null}
                  <Text style={styles.buttonTextStyle}>安全登录</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.agreeWrap} onPress={() => this.setState({checked: !this.state.checked})}>
                  {
                    !checked
                      ? <Image source={require('../assets/login_unchecked.png')} style={styles.checkIcon}></Image>
                      : <Image source={require('../assets/login_checked.png')} style={styles.checkIcon}></Image>
                  }
                  <Text style={styles.agreeText}>阅读并同意隐私政策</Text>
                  <Text style={styles.agreementText} onPress={() => Linking.openURL('https://www.shyuezheng.com/download/policy.html')}>《隐私政策》</Text>
                </TouchableOpacity>
                <View style={styles.register}>
                  <Text style={styles.registerText} onPress={() => {
                    Actions.register();
                  }}>注册</Text>
                </View>
              </View>
            </View>
          </SafeAreaView>
        </ImageBackground>
      </View>
    );
  }
}
const windowWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
  container: {
    width: windowWidth - 46,
    marginLeft: 23,
    height: 401,
    position: 'relative'
  },
  containerBorder: {
    width: '100%',
    height: '100%',
    position: "absolute",
    left: 0,
    top: 0
  },
  form: {
    paddingHorizontal: 40,
    position: "absolute",
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    zIndex: 999
  },
  title: {
    marginBottom: 36,
    marginTop: 25,
    fontSize: 18,
    color: 'white',
    fontWeight: '600',
    textAlign: 'center'
  },
  formItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    height: 50,
    backgroundColor: 'rgba(15, 47, 95, 0.8)',
    borderRadius: 4,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#00BBFF'
  },
  loginIconAccount: {
    width: 24,
    height: 24
  },
  inputStyle: {
    color: '#fff',
    fontSize: 15,
    marginLeft: 5,
    flex: 1
  },
  buttonStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    backgroundColor: "#5196FD",
    borderRadius: 4,
    marginTop: 26
  },
  disableButtonStyle: {
    opacity: 0.5
  },
  buttonTextStyle: {
    color: '#fff',
    fontSize: 15
  },
  forget: {
    alignItems: 'flex-end',
    marginTop: 5,
  },
  forgetText: {
    textDecorationLine: 'underline',
    textDecorationColor: '#5196FD',
    fontSize: 12,
    color: '#5196FD',
  },
  agreeWrap: {
    flexDirection: 'row',
    marginTop: 15
  },
  checkIcon: {
    width: 12,
    height: 12,
    marginRight: 10
  },
  agreeText: {
    fontSize: 12,
    color: '#fff'
  },
  agreementText: {
    color: '#5196FD',
    fontSize: 12,
    marginLeft: 5,
    textDecorationLine: 'underline',
    textDecorationColor: '#5196FD',
  },
  register: {
    alignItems: 'center',
    marginTop: 22,
  },
  registerText: {
    textDecorationLine: 'underline',
    textDecorationColor: '#fff',
    fontSize: 15,
    color: '#fff',
  },
});
